<template>
    <view class="pos-a b0 r0 flcc flex-fill" style="transform: translateX(100%);z-index: 1;" :style="style" :class="anmi" v-show="showStatus">
		<slot class="flex1"></slot>
	</view>
</template>
<!-- 
使用案例：
ref="mySlideBox" 为固定属性
<sslide ref="mySlideBox"></sslide>

父容器方法
@tap="mySlide(index)" 
-->
<script>
    export default {
        name: "sslide",
        data() {
            return {
                showStatus:false,
				anmi: 'animation-fade-out',
				style: 'transform: translateY(100%);',
            }
        },
        methods: {
           showSlide(){
			   // this.style='transform: translateY(100%);'
			   this.anmi = "animation-fade"
			   this.showStatus=true
			   setTimeout(()=>{
				   this.anmi = ""
				   // this.style = ""
			   },300)
			   console.log('show slide')
		   },
	   
		  hideSlide(){
				// this.anmi = "animation-fade animation-reverse"
				this.anmi = "animation-fade-out"
			   setTimeout(()=>{
			   		// this.style='transform: translateY(100%);'	
					// this.anmi = "animation-fade-out"
			   this.showStatus=false
			   },300)
			   console.log('hide slide')
		  }
        }
    }
</script>

<style>
</style>
